<template>
    <header>
        <p>商家列表</p>
    </header>
    <template v-for="item in businessList">
        <BusinessItem :business="item"/>
    </template>
    <MyFooter/>
</template>

<script setup>
import MyFooter from "../components/Footer.vue";
import BusinessItem from "../components/BusinessItem.vue";

import {useRoute} from "vue-router";
import {onMounted, reactive} from "vue";

import {getAllBusinessAPI,getAllBusinessByOrderTypeAPI} from "../api/api.js";


const route = useRoute()
const businessList = reactive([])

onMounted(()=>{
    //判断是否哪个组件跳转过来的
    if (route.name==="businessListOrderType"){
        const orderTypeId = route.params.orderType
        getAllBusinessByOrderTypeAPI(orderTypeId).then(res=>{
            businessList.splice(0,businessList.length)
            businessList.push(...res.data.data)
        })
    }else {
        getAllBusinessAPI().then(res=>{
            businessList.splice(0,businessList.length)
            businessList.push(...res.data.data)
        })
    }
})
</script>

<style scoped>
/****************** header部分 ******************/
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

</style>